<template>
    <div class="doctor-table-container">

        <!-- 数据表格 -->
        <el-table :data="tableData" style="width: 100%"
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e', textAlign: 'center' }">
            <!-- 复选框列 -->
            <!-- <el-table-column type="selection" /> -->

            <!-- 编号列 -->
            <el-table-column prop="_id" label="编号" min-width="120" align="center" />

            <!-- 头像列 -->
            <el-table-column label="头像" width="70" align="center">
                <template #default="scope">
                    <el-avatar :size="40" :src="scope.row.avatar" />
                </template>
            </el-table-column>

            <!-- 姓名列 -->
            <el-table-column prop="name" label="姓名" align="center" />
            <!-- 联系电话列 -->
            <el-table-column prop="phone" label="联系电话" align="center" />

            <!-- 角色列 -->
            <el-table-column prop="roleId.name" label="角色" min-width="150" align="center" />

            <!-- 所属团队列 -->
            <el-table-column prop="teamIds[0].name" label="所属团队" min-width="100" align="center" />

            <!-- 所属机构列 -->
            <el-table-column prop="organizationId.name" label="所属机构" show-overflow-tooltip align="center" />

            <!-- 状态列 -->
            <el-table-column label="状态" width="80" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" class="ml-2" inline-prompt
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="启用"
                        inactive-text="禁用" />
                </template>
            </el-table-column>

            <!-- 操作列 -->
            <el-table-column label="操作" width="250" align="center">
                <template #default="scope">
                    <el-button type="primary" link @click="handleViewDetail(scope.row)">查看详情</el-button>
                    <el-button type="primary" link>发消息</el-button>
                    <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20, 50, 100]" :total="total" background
                layout="total, sizes, prev, pager, next, jumper" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteDoctorsApi, searchDoctorsApi } from '@/api/doctors'

// 路由实例
const router = useRouter()

// 接收父组件的搜索参数
const props = defineProps<{
    searchParams?: any
}>()

// 定义事件
const emit = defineEmits(['view-detail', 'edit'])



// 表格数据
const tableData = ref([

])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(100)

// 生命周期
onMounted(() => {
    searchDoctors()
})

// 监听搜索参数变化
// watch(() => props.searchParams, (newParams) => {
//     console.log(props.searchParams);

//     if (newParams) {
//         searchDoctors()
//     }
// }, { deep: true })

// 分页：
watch(() => [currentPage, pageSize], () => {
    searchDoctors();
}, { deep: true });

function searchDoctors(searchData?: any) {
    // 合并搜索参数
    const params = {
        // ...props.searchParams,
        ...searchData,
        currentPage: currentPage.value,
        pageSize: pageSize.value
    }

    searchDoctorsApi(params)
        .then(res => {
            if (res.code == 200) {
                tableData.value = res.data.rows;
                total.value = res.data.total;
            }

        })
}

// 查看详情
const handleViewDetail = (row: any) => {
    // 直接路由跳转到医生详情页面
    router.push(`/data/doctor/detail/${row._id}`)
}

// 编辑医生
const handleEdit = (row: any) => {
    // 直接路由跳转到编辑医生页面
    router.push(`/data/doctor/update/${row._id}`)
}

// 暴露方法给父组件
defineExpose({
    searchDoctors
})


// 删除
async function handleDelete(row: any) {
    await ElMessageBox.confirm(
        '医生信息删除后无法恢复，确定要删除吗？',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )

    // 用户确认删除，调用删除API
    const res: any = await deleteDoctorsApi({ _id: row._id })
    console.log('删除API响应:', res)

    if (res.code == 200) {
        ElMessage.success('删除成功')
        searchDoctors()
    } else {
        ElMessage.error(res.message || '删除失败')
    }
}

</script>

<style scoped>
.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>
